设为首页收藏本站
开启辅助访问
echarts2 饼图标签文字换行 您所在的位置：网站首页 › echarts 饼图重叠 › echarts2 饼图标签文字换行

echarts2 饼图标签文字换行

2023-10-31 03:38| 来源: 网络整理| 查看: 265

在使用echarts2的过程中，有时会遇到标签文字过长导致显示不完整的问题。例如：

在这里插入图片描述 这时候就需要用到 标签里的formatter 回调函数来处理这种情况了。

方式一： formatter : ’ {b} : \n {c} \n ({d}%) ', 这种是指定某个地方换行。

在这里插入图片描述 **　备注：官方文档里面有{a}，{b}，{c}，{d}的解释：**

在这里插入图片描述

这里是饼图，所以 { b } 就是数据项的名称即：“直接访问”，“邮件营销直”等。 　　　　　　　　　　　　 { c }就是数据项下面的那个数值 　　　　　　　　　　　　 { d }就是下面的那个百分比 　　　　注意：在饼图里如果是tootip里面的formatter， 　　　　那么 \n 要换成 才能达到换行的效果。其它图没试过，不知道是否一样。 方式二：自定义函数来处理达到自定义每行个数再换行 formatter:get， //调用get textStyle:{ //这只是为了让文字居中而已 　　align:"center", //水平对齐方式可选left，right，center 　　baseline:"top",　　　　//垂直对齐方式可选top，bottom，middle },

然后在最外面定义一个函数表达式

var get=function(e){ 　　　　 var newStr=" "; var start,end; 　　　　var name_len=e.name.length; 　　　　　　　　　　　　 //每个内容名称的长度 　　　　var max_name=4; 　　　　　　　　　　　　　　　　　　//每行最多显示的字数 　　　　var new_row = Math.ceil(name_len / max_name); 　　　　// 最多能显示几行，向上取整比如2.1就是3行 　　　　if(name_len>max_name){ 　　　　　　　　　　　　　　 //如果长度大于每行最多显示的字数 　　　　　　for(var i=0;i 　　　　　　　　　　　　 //最后一行就不换行了 　　　　　　　　　　old=e.name.substring(start); 　　　　　　　　}else{ 　　　　　　　　　　old=e.name.substring(start,end)+"\n"; 　　　　　　　　 } 　　　　　　　　　　 newStr+=old; //拼接字符串 　　　　　　 } 　　　 }else{ //如果小于每行最多显示的字数就返回原来的字符串 　　　　　　newStr=e.name; 　　　 } 　　　 return newStr; 　　}

结果为： 在这里插入图片描述

我使用的是echart2，不知道echart3的function（e）中 e 的内容是否一样。无论是条形图或者其他的图，换行的思路都是一样的，都是先获取名称再进行换行处理。

再补充一点：

在这里插入图片描述

要想让内容在饼图里并居中除了要处理换行之外，还需要添加如下四个属性：

series:{ 　　　　itemstyle:{ 　　　　　　normal:{ 　　　　　　　　label:{ 　　　　　　　　　　position:"inner",　　　　　　　//可选参数：外部 “outer” 和内部 “inner”　　 　　　　　　　　　　textStyle:{ 　　　　　　　　　　　　align:"center", 　　　　　　　　　　　　baseline:"middle", 　　　　　　　　　　}, 　　　　　　　　}, 　　　　　　　　lableLine:{ 　　　　　　　　　　show:false //标签视觉引导线 不显示 　　　　　　　　} 　　　　　　} 　　　　} 　　}

如果想只每行一个字显示：

formatter:function(e){ 　　return e.split("").join("\n"); 　　//这里的e直接就是字符串，如果不是的话，还需要获取到字符串再进行操作 }


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有